<!--  -->
<template>
  <div id="goodsDetail">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000"  :height="375" indicator-color="#fff">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="swiperimg" v-lazy="image.img_url" />
      </van-swipe-item>
    </van-swipe>

    <div class="info">
      <span>30天无忧退货</span>
      <span>48小时快速退款</span>
      <span>满88元免邮费</span>
    </div>

    <div class="proInfo">
      <h3 class="title">{{info.name}}</h3>
      <p class="brief">{{info.goods_brief}}</p>
      <p class="price">￥{{info.retail_price}}</p>
    </div>

    <van-cell @click="chooseProduct" style="padding: 0" title="选择商品规格" is-link />

    <!-- 商品参数 -->
    <div>
      <h3 style="margin:10px 0">商品参数</h3>
      <div class="proItem" v-for="(attr, index) in attribute" :key="index">
        <span class="title">{{attr.name}}</span>
        <span class="value">{{attr.value}}</span>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="proDetail" v-html="info.goods_desc">

    </div>

    <van-goods-action>
      <van-goods-action-icon to="/cart" :info="$store.state.cartTotal.goodsCount == 0? '' : $store.state.cartTotal.goodsCount" icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star-o" text="已收藏" color="#ff5000" />
      <van-goods-action-button @click="addCart" type="warning" text="加入购物车" />
      <van-goods-action-button to="/cart" type="danger" text="立即购买" />
    </van-goods-action>

    <van-sku
      v-model="showSku"
      :sku="sku"
      :goods="goods"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import axios from 'axios'
let sku = {
  // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
  // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
  tree: [
    {
      k: '颜色', // skuKeyName：规格类目名称
      k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
      v: [
        {
          id: '', // skuValueId：规格值 id
          name: '', // skuValueName：规格值名称
          
        },
        {
          id: '',
          name: '',
          
        }
      ],
      // largeImageMode: true, //  是否展示大图模式
    }
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
    {
      id: 2259, // skuId
      's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 100, // 价格（单位分）
      stock_num: 110 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '1', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '4', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 200, // 价格（单位分）
      stock_num: 20 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '3', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 300, // 价格（单位分）
      stock_num: 67 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '4', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 400, // 价格（单位分）
      stock_num: 99 // 当前 sku 组合对应的库存
    },
    {
      id: 2259, // skuId
      's-1': '2', // 规格类目 k_s 为 s1 的对应规格值 id
      's-2': '5', // 规格类目 k_s 为 s2 的对应规格值 id
      price: 500, // 价格（单位分）
      stock_num: 99 // 当前 sku 组合对应的库存
    }
  ],
  price: '199.00', // 默认价格（单位元）
  stock_num: 999, // 商品总库存
  
}
export default {
  props:['id'],
  data () {
    return {
      data: {},
      info: {},
      attribute: [],
      showSku: false,
      sku: sku,
      goods: {
        picture: '',
        title: '测试商品'
      },
    }
  },
  methods: {
    onClickLeft() {
      return this.$router.go(-1)
    },
    onBuyClicked() {
      // 点击跳转到购买详情页
    },
    async onAddCartClicked(skuData) {
      // 点击加入购物车
      //获取选中的商品，并且提交到后端的购物车API里
      //选择商品规格，并且提交到购物车
      this.showSku = false
      let selectedSku = skuData.selectedSkuComb["s-1"] + '_' +skuData.selectedSkuComb["s-2"]
      let resultPro = this.data.productList.filter(prod=> prod.goods_specification_ids == selectedSku)
      let cartRes =await axios.post(this.$root.api.CartAdd,{goodsId: resultPro[0].goods_id, number:skuData.selectedNum, productId:resultPro[0].id })
      let data = cartRes.data.data
      console.log(data)
      this.$store.commit('SETCARTLIST', data.cartList)
      this.$store.commit('SETCARTTOTAL', data.cartTotal)
      
    },
    addCart() {
      this.showSku = true
    },
    chooseProduct() {
      this.showSku = true
    }
  },
  computed: {
    images() {
      if (this.data.gallery) {
        return this.data.gallery
      }else {
        return []
      }
    }
  },
  async created() {
    this.$store.dispatch('setCart')
    let res = await axios.get(this.$root.api.GoodsDetail,{params:{id:this.id}})
    this.data = res.data.data
    this.info = this.data.info
    this.attribute = this.data.attribute
    this.goods.picture = this.info.primary_pic_url
    this.goods.title = this.info.name
    this.sku.price = this.info.retail_price
    this.sku.stock_num = this.info.goods_number
    let tree = []
    this.data.specificationList.forEach((item, index) => {
      let arr = []
      item.valueList.forEach((product, i) => {
        arr.push({
          id: product.id,
          name: product.value
        })
      })

      tree.push(
        {
          k: item.name, // skuKeyName：规格类目名称
          k_s: "s-"+item.specification_id, // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          v: arr,
        }   
      )
    })
    this.sku.tree = tree

  }
}
</script>

<style lang="less" scoped>
#goodsDetail{
  .swiperimg{
      width: 100%;
  }
  .info{
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: #999;
    height: 24px;
    line-height: 24px;
    background: #efefef;
    span{
      position: relative;
    }
    span::before{
      content: "";
      display: block;
      position: absolute;
      left: -9px;
      top: 9px;
      width: 4px;
      height: 4px;
      border-radius: 3px;
      border: 1px solid red;
    }
  }
  .proInfo{
    text-align: center;

    .title{
      font-weight: 500;
      margin: 10px 0 0;
    }
    .brief{
      font-size: 12px;
      color: #999;
      margin: 0;
    }
    .price{
      font-size: 16px;
      color: red;
    }
  }
  .proItem{
    display: flex;
    justify-content: space-between;
    height: 24px;
    line-height: 24px;
    background: #efefef;
    border-bottom: 1px solid #fff;
    span{
      font-size: 12px;
      text-align: left;
    }
    
  }
  .proDetail{
    // width: 100%;
    /deep/img{
      width: 100%;
    }
    /deep/p{
      margin: 0;
      display: flex;
    }
  }
  
}

</style>
